<template>
    <div class="cashback">
      <div class="promotion-list">
        <h2 class="title">Promotion List</h2>
        <div class="info-box">
          <ul class="info info-title">
            <li class="li-id">Order ID</li>
            <li class="li-time">Order Time</li>
            <li class="li-total">Total</li>
            <li class="li-status">Order Status</li>
            <li class="li-payment">Payment Status</li>
            <li class="li-tracking" style="text-align: center">Tracking</li>
            <li class="li-btn"></li>
          </ul>
          <div v-for="(item , index) in promotionList" :key="index">
            <ul class="info info-data" v-if="item.paymentStatus === 'UnPaid' || item.paymentStatus === 'Failure' ">
              <li class="li-id">#{{item.orderNo}}</li>
              <li class="li-time">{{timeChage(item.lastModifiedTime)}} </li>
              <li class="li-total">${{item.price}}</li>
              <li class="li-status red">Pending</li>
              <li class="li-payment red">{{item.paymentStatus === 'UnPaid'? 'need to pay' : item.paymentStatus }}</li>
              <li class="li-tracking">
                <div class="time-box" v-if="item.lastModifiedTime">
                  <time-down @time-end="timeEnd" :endTime="item.lastModifiedTime" :upTime="true"></time-down>
                </div>
              </li>
              <li class="li-btn">
                <button class="nobg" @click="removeOrder(item.orderNo)">Remove</button>
                <button class="btn" @click="selectItem1(item.orderNo)">view</button>
              </li>
            </ul>
            <ul class="info info-data" v-else>
              <li class="li-id">#{{item.orderNo}}</li>
              <li class="li-time">{{timeChage(item.lastModifiedTime)}} </li>
              <li class="li-total">${{item.price}}</li>
              <li class="li-status blud">{{item.orderStatus === 'Created' ? 'Confirm': item.orderStatus}}</li>
              <li class="li-payment blud">{{item.paymentStatus === 'Paid' ? 'Complete' : item.paymentStatus}}</li>
              <li class="li-tracking">{{item.lastestEvent.description}}</li>
              <li class="li-btn">
                <button class="btn" @click="selectItem(item.orderNo)">view</button>
              </li>
            </ul>
          </div>
          <div class="loading-container" v-show="Loading">
            <loading></loading>
          </div>
          <div v-show="noData" class="no-result-wrapper" ref="noDataEl">
            <no-data-show></no-data-show>
          </div>
        </div>
      </div>
      <div class="common-page" v-show="hasMore">
        <pageination @changePage="changePages" :pages="totalPages"></pageination>
      </div>
    </div>
</template>

<script  type="text/ecmascript-6">
  import Loading from 'base/loading/loading'
  import {MyOrderPromotion,MyOrderCancel} from 'api/my-order'
  import pageination from 'base/pageination/pageination'
  import TimeDown from 'base/countdown/countdown'
  import {mapMutations,mapActions} from 'vuex'
  import axios from 'axios'
  import NoDataShow from "../../base/no-data-show/no-data-show";
  import monitoring from '../../common/js/monitoring';

  export default {

    data() {
      return {
        Loading: false,
        noData: false,
        hasMore: false,
        promotionList: [],
        PageNumber: 1,
        totalPages: 0,
      }
    },
    created() {
      monitoring.openPromotionOrder();//todo Facebook Pixel & Google Analytic Code    openPromotionOrder
      this.$nextTick(() => {
        this._MyOrderPromotion()

      })
    },
    methods: {
      timeEnd(){
        this.$router.push({path:'/home'})
      },
      selectItem1(orderNo){
        sessionStorage['promotionOrderNo'] = orderNo;    //缓存存一份订单号
        this.$router.push({name:'promotionItem',params:{orderNo:orderNo}});   //路由再带一份订单号  双重保证
      },
      selectItem(item) {
        this.$router.push({
          path: `/my-order/promotion/${item}`
        });
      },
      removeOrder(orderNo,index){
        let _this = this

        let params = {
          orderNo,
          amount:_this.promotionList.price,
        };
        monitoring.removeOrder(params);//todo Facebook Pixel & Google Analytic Code    removeOrder

        MyOrderCancel(orderNo).then((res) => {
          _this.promotionList.splice(index,1)
        })
      },
      timeChage(time){
        let newTime = ''
        if(time !== ''){
          let year = time.substring(0,4)
          let month = time.substring(5,7)
          let data = time.substring(8,10)
          let hours = time.substring(11,13)
          let minu = time.substring(14,16)
          let ampm = hours >= 12 ? 'pm' : 'am';
          newTime = month + "-" + data + '-'+ year + ' '+ hours +'-'+ minu + ampm
        }
        return newTime
      },
      _MyOrderPromotion() {
          this.noData = false
          this.Loading = true
          this.PageNumber = 1
          MyOrderPromotion(this.PageNumber).then((res) => {
            this.Loading = false
            if(res.data && res.data.length >0){
              this.promotionList = res.data
              this.totalPages = res.totalPages
            }
            if(this.PageNumber<2){ //第二页起不再较验
              this._checkMore(res.data)
            }
          })
      },
      changePages(num) {
        if(num > this.totalPages){
          return
        }
        this.promotionList = []
        this.PageNumber = num
        this._MyOrderPromotion()
      },
      _checkMore(data) {
        if (data.length === 20){
          this.hasMore = true
        }else{
          this.hasMore = false
        }
        if(data.length=== 0){
          this.noData = true
        }
      }
    },
    watch:{
      '$route'(to, from) {
        if (to.path === '/my-order/promotion') {
          this._MyOrderPromotion()
        }
      }
    },
    components: {
      NoDataShow,
      Loading,
      pageination,
      TimeDown,
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .loading-container
    width:100%;
    height: 276px;
    padding-top: 192px;
  .no-result-wrapper
    width: 100%
    height:475px
  .cashback
    width:100%
    .promotion-list
      margin-top:16px;
      width:100%;
      height:auto
      border:1px solid #dcdcdc
      .title
        height: 40px;
        line-height:40px
        background-color: #f6f7f8;
        padding-left:18px;
        font-size:16px;
        color:#333
      .info-box
        width:100%;
        height:auto
        .info
          display: flex
          color:#333
          height:44px;
          line-height:44px;
          text-align center
          li
           height:100%
          .li-id
            flex: 1
          .li-time
            flex 2
          .li-total
            flex: 1
          .li-tracking
            flex:2
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            text-align left
          .li-status
            flex:1.5
          .li-payment
            flex:1.5
          .red
            color:#fd6060
          .blud
            color:#4999e2
          .gray
            color:#bbb
          .li-btn
            flex:1
            position:relative
            .btn
              width:87%;
              height: 34px;
              line-height: 34px;
              color: #ffffff
              background #000
              border:none
              cursor:pointer
              font-size:16px;
              outline none
            .nobg
              position:absolute
              left:-100%;
              bottom:14px;
              width:87%;
              height: 34px;
              line-height: 34px;
              border:none
              cursor:pointer
              font-size:16px;
              background transparent
              color:#18823a
        .info-title
          color: #707070;
          font-size: 18px;
        .info-data
          height:60px
          line-height:60px
          border-bottom:1px solid #dcdcdc
        .info-data:last-child
          border-bottom :none
  .common-page
    margin-top 68px
    margin-bottom 76px
</style>
